<template>
    <div>
        <my-chart ref="myChart" chart-id="line-chart" :relation="chart.relation" :xAxis="chart.xAxis"
            :series="chart.series"></my-chart>
    </div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import MyChart from "@/components/chart/MyChart.vue";
const myChart = ref(null);
const chart = reactive({
    title: {
        text: "折线图",
    },
    relation: [
        {
            prop: "name",
            name: "姓名",
        },
        {
            prop: "age",
            name: "年龄",
        },
        {
            prop: "sex",
            name: "性别",
        },
    ],
    xAxis: [
        {
            data: [],
        },
    ],
    series: [
        {
            prop: "name",
            type: "line",
            data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        },
        {
            prop: "age",
            type: "line",
            data: [10, 20, 30, 40, 50, 60, 70, 80, 90],
        },
    ],
});
const generatexAxis = () => {
    const xAxis = [];
    let h = 0, m = -15
    for (let i = 0; i < 96; i++) {
        m += 15
        if (m >= 60) {
            h += 1
            m = 0
        }
        let hS = h < 10 ? `0${h}` : h
        let mS = m < 10 ? `0${m}` : m
        xAxis.push(`${hS}:${mS}`)
    }
    return xAxis;
};
const generSeriesdata = () => {
    const series = [];
    for (let i = 0; i < 96; i++) {
        series.push(Math.floor(Math.random() * 200 + 100));
    }
    return series;
};
onMounted(() => {
    chart.xAxis[0].data = generatexAxis()
    chart.series[0].data = generSeriesdata()
    chart.series[1].data = generSeriesdata()
    myChart.value.init();
    myChart.value.chartResize();
});
</script>
<style></style>